<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="4">
          <el-input
            v-model="queryData.model.modelName"
            placeholder="名称"
            clearable
            class="filter-input filter-item"
            @keyup.enter.native="getList"
        /></el-col>
        <el-col :span="4">
          <el-input
            v-model="queryData.model.modelCode"
            placeholder="编码"
            clearable
            class="filter-input filter-item"
            @keyup.enter.native="getList"
        /></el-col>
        <el-col :span="4"
          ><el-input
            v-model="queryData.model.oneName"
            placeholder="一级分类名称"
            clearable
            class="filter-input filter-item"
            @keyup.enter.native="getList"
        /></el-col>
        <el-col :span="4"
          ><el-input
            v-model="queryData.model.twoName"
            placeholder="二级分类名称"
            clearable
            class="filter-input filter-item"
            @keyup.enter.native="getList"
        /></el-col>
        <el-col :span="4">
          <el-input
            v-model="queryData.model.threeName"
            placeholder="三级分类名称"
            clearable
            class="filter-input filter-item"
            @keyup.enter.native="getList"
        /></el-col>
      </el-row>
      <div style="float: right">
        <el-button type="primary" class="filter-item" @click="getList">
          <svg-icon icon-class="search" style="margin-right: 5px" />搜索
        </el-button>
        <el-button type="primary" class="filter-item" @click="goOperate({})">
          <svg-icon icon-class="search" style="margin-right: 5px" />添加
        </el-button>
      </div>
    </div>

    <div id="screenfull-container" style="background-color: #ffffff">
      <div style="width: 100%; text-align: right; float: right">
        <el-icon
          style="
            cursor: pointer;
            margin: 0px 5px 5px 5px;
            font-size: 18px;
            top: -2px;
          "
          @click="handleFullscreen"
        >
          <FullScreen />
        </el-icon>
        <svg-icon
          icon-class="
          "
          style="cursor: pointer; margin: 0px 5px 5px 5px; font-size: 18px"
          @click="getList"
        />
      </div>
      <el-table
        :data="content.list"
        v-loading="loading"
        border
        style="width: 100%"
      >
        <el-table-column type="index" width="50" align="center" />
        <el-table-column prop="modelName" label="名称" width="200" />
        <el-table-column prop="modelCode" label="编码" width="200" />
        <el-table-column label="缩略图" width="200">
          <template #default="{ row }">
            <img
              :src="row.url"
              alt=""
              style="max-width: 150px"
              @click="openImgDialog(row.minioFilePath)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="specialityName" label="一级分类" />
        <el-table-column prop="classificationName" label="二级分类" />
        <!--        <el-table-column prop="threeName" label="三级分类" />-->
        <el-table-column prop="specifications" label="规格" />
        <!--        <el-table-column label="规格">
          <template #default="{ row }">
            <el-tag
              v-for="item in row.specifications"
              size="large"
              :key="item"
              style="margin:5px 5px 0 0"
              >{{ item }}</el-tag
            >
          </template>
        </el-table-column>-->
        <el-table-column prop="createtime" label="创建时间">
          <template #default="{ row }">
            {{ formatTime(row.createtime) }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="clickDropdown(1, row)">
              编辑
            </el-button>
            <el-popconfirm
              placement="top"
              width="160"
              title="是否删除此行?"
              trigger="click"
              @confirm="clickDropdown(2, row)"
            >
              <template #reference>
                <el-button type="danger" style="margin-left: 10px" link>
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="content.total"
        v-model:page="queryData.current"
        v-model:limit="queryData.size"
        @pagination="getList"
      />
    </div>

    <el-dialog v-model="dialogVisible" width="30%">
      <el-carousel indicator-position="outside" :autoplay="false">
        <el-carousel-item v-for="(i, k) in imgList" :key="k" height="200px">
          <img :src="i" alt="" style="width: 100%" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script setup>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import screenfull from "screenfull";
import { queryModelPage, deleteModel } from "@/api/buildlibrary";
import { filePreview } from "@/api/file";
import { ElMessage } from "element-plus";
import { formatDateTime } from "@/utils";

const router = useRouter();

onMounted(() => {
  getList();
});

const loading = ref(false);
const queryData = reactive({
  model: {
    modelName: "",
  },
  current: 1,
  size: 10,
});
const content = reactive({
  list: [],
  total: 0,
});
const getList = async () => {
  try {
    loading.value = true;
    const res = await queryModelPage(queryData);
    // const data = res
    let data = res.data.records;
    let count = res.data.total;

    // for (let index = 0; index < data.length; index++) {
    //   if (data[index].minioFilePath[0]) {
    //     const res1 = await filePreview(data[index].minioFilePath[0]);
    //     data[index].url = res1.data;
    //   }
    // }
    content.list = data;
    content.total = count;
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

const clickDropdown = async (value, { id }) => {
  if (value === 1) {
    goOperate({ id });
  } else {
    try {
      await deleteModel(id);
      ElMessage({
        message: `删除成功`,
        type: "success",
      });
      getList();
    } catch (error) {
      console.log(error);
    }
  }
};

const goOperate = (query) => {
  router.push({
    // path: "/modelmanagementoperate",
    path: "/buildlibrary/operate",
    query,
  });
};

const handleFullscreen = () => {
  const element = document.getElementById("screenfull-container");
  if (screenfull.enabled) {
    screenfull.request(element);
  }
  screenfull.toggle();
};

const dialogVisible = ref(false);
const imgList = ref([]);
const openImgDialog = async (list) => {
  imgList.value = [];
  dialogVisible.value = true;
  // for (let i = 0; i < list.length; i++) {
  //   const res = await filePreview(list[i]);
  //   imgList.value.push(res.data);
  // }
};

const formatTime = (time) => {
  return formatDateTime(time);
};
</script>

<style lang="scss" scoped>
.img-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 45px;
}

.item-operate {
  position: absolute;
  right: 8px;
  top: 13px;
}

.image-slot {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 44px;
  background-color: #f5f7fa;
  color: #909399;
}
</style>
